<template>
  <view class="video_container" @click.stop="collectionStatus = false">
    <view class="home_top_bg">
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px'">
        <view class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px'">
          <view class="title"
            :style="'height:' + tabBarHeight + 'px;line-height:' + tabBarHeight + 'px'">
            <text>视频库</text>
            <img class="title_img" :src="staticUrl() + '/home/videoMore.png'" alt=""
              @click.stop="collectionStatus = !collectionStatus" />
            <view class="collection" :style="'top:' + (tabBarHeight + 10) + 'px'"
              v-if="collectionStatus" @click="clickCollection">
              <img class="collection_img" :src="staticUrl() + '/home/collection.png'" alt="" />
              <text>我的收藏</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- @touchmove.stop.prevent="() => { }" -->
    <view class="video_item" :style="'margin-top:' + topBarHeight + 'px;'">
      <scroll-view scroll-y :style="'height:calc(100vh - ' + (topBarHeight + 10) + 'px)'">
        <view v-for="(item, index) in regionList" :key="index" class="items">
          <view :class="activeLabel === item.name ? 'activeStyle' : ''" @click="clickRegion(item)">
            {{ item.name }}
          </view>
        </view>
      </scroll-view>

      <scroll-view scroll-y :style="'height:calc(100vh - ' + (topBarHeight + 10) + 'px)'"
        v-if="videoList.length" @scrolltolower="touchTheBottom">
        <view v-for="(item, index) in videoList" :key="index" class="item"
          @click="clickVideoItem(item)">
          <view class="images">
            <text> {{ item.viewCount > 99 ? 99 + '+' : item.viewCount }}人观看</text>
            <image :src="item.cover" mode="scaleToFill"></image>
          </view>
          <view class="content">
            <view class="name">{{ item.title }}</view>
            <view class="author">主讲人：{{ item.author }}</view>
            <view class="sc">
              <text>时长：{{ item.duration ? item.duration : '' }}</text>
              <image :src="staticUrl() + '/video/cart.png'" alt="" />
            </view>
          </view>
        </view>
        <view :style="'height:' + (topBarHeight + 20) + 'px'"></view>
      </scroll-view>
      <scroll-view v-else>
        <view style="padding: 90% 35%">
          <text> 没有视频 </text>
        </view>
      </scroll-view>
    </view>

    <QualificationsStatus v-if="verifyTokenStatus"></QualificationsStatus>
  </view>
</template>

<script>
import { getVideoList, getVideoRegion } from '@/api/video/index'

export default {
  components: {},
  data () {
    return {
      verifyTokenStatus: false,
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      collectionStatus: false,
      pageNumber: 1,
      pageSize: 30,
      //大区列表
      regionList: [],
      // 视频列表
      videoList: [],
      // 大区id
      marketId: '',
      activeLabel: '',
      pages: 0
    }
  },
  onShow () {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.tabBarHeight + self.stateBarHeight
        // #endif
        // #ifdef MP-TOUTIAO
        self.stateBarHeight = 0
        self.topBarHeight = self.tabBarHeight
        // #endif
      }
    })
    this.verifyTokenStatus = getApp().verifyTokenStatus()
    this.getList()
  },
  // 监听触底
  // onReachBottom () {
  //   this.pageNumber++
  //   this.getData()
  // },
  methods: {
    qualificationsOverdue () {
      uni.navigateTo({
        url: '/subpackage/personalCenter/qualifications?active=2'
      })
    },
    touchTheBottom () {
      if (this.pages > this.pageNumber) {
        this.pageNumber++
        this.getData()
      }
    },
    getList () {
      getVideoRegion(0).then(res => {
        if (res.code === 200) {
          res.data.unshift({
            id: '',
            name: '全部区域'
          })
          res.data.forEach(ii => {
            this.$set(ii, 'active', false)
          })
          this.regionList = res.data
          this.activeLabel = this.regionList[0].name
        }
      })
      this.getItemList()
    },
    getItemList () {
      getVideoList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        marketId: this.marketId
      }).then(res => {
        if (res.code === 200) {
          this.videoList = res.data.records
          this.pages = res.data.pages
        }
      })
    },
    getData () {
      getVideoList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        marketId: this.marketId
      }).then(res => {
        if (res.code === 200) {
          this.videoList.push(...res.data.records)
        }
      })
    },
    clickCollection () {
      uni.navigateTo({
        url: '/subpackage/personalCenter/collection?type=VIDEO'
      })
    },
    clickRegion (item) {
      this.activeLabel = item.name
      this.marketId = item.id
      this.videoList = []
      this.pageNumber = 1
      this.getItemList()
    },
    clickVideoItem (item) {
      uni.navigateTo({
        url: '/pages/video/play?id=' + item.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.video_container {
  background: #f9f9f9;
}

.home_top_bg {
  .top_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #fff;

    .top_cont {
      background: #fff;
      display: flex;
      flex-flow: column nowrap;

      .title {
        position: relative;
        /* #ifdef MP-TOUTIAO */
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* #endif */
        text {
          margin-left: 5%;
        }

        .title_img {
          width: 50rpx;
          height: 10rpx;
          vertical-align: middle;
          /* #ifdef MP-WEIXIN */
          padding: 20rpx;
          margin-left: 40%;
          /* #endif */
          /* #ifndef MP */
          margin-left: 60%;
          /* #endif */
          /* #ifdef MP-TOUTIAO */
          margin-right: 10%;
          /* #endif */
        }

        .collection {
          position: absolute;
          right: 25rpx;
          background: #fff;
          width: 250rpx;
          padding: 20rpx 20rpx 20rpx 40rpx;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          line-height: 1;

          .collection_img {
            width: 40rpx;
            height: 40rpx;
            // vertical-align: sub;
            // margin-right: 20rpx;
          }
        }
      }
    }
  }
}

.video_item {
  font-size: 26rpx;
  display: flex;
  flex-flow: row nowrap;

  scroll-view:first-child {
    width: 30%;
    margin-top: 20.83rpx;

    .items {
      background: #fff;
      font-size: 24rpx;
      line-height: 78rpx;
      text-align: center;
      margin: 4rpx 0;
    }
  }

  .activeStyle {
    color: #2871fc;
    background: #f9f9f9;
    border-left: 4rpx solid #2871fc;
  }

  scroll-view:last-child {
    margin-top: 20.83rpx;
    margin-left: 20.83rpx;

    .item {
      height: 214rpx;
      background: #ffffff;
      border-radius: 11rpx;
      margin-bottom: 20.83rpx;
      margin-right: 20.83rpx;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;

      .images {
        position: relative;
        margin-left: 21.53rpx;
        margin-right: 24.31rpx;

        text {
          box-sizing: border-box;
          position: absolute;
          bottom: 8rpx;
          width: 194rpx;
          height: 33rpx;
          color: #fff;
          font-size: 24rpx;
          // background: #1b1b1b;
          background: rgb(27, 27, 27, 0.4);
          border-radius: 11rpx;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          padding: 0 10rpx;
        }

        image {
          width: 194rpx;
          height: 144rpx;
          border-radius: 11rpx;
        }
      }

      .content {
        .name {
          font-size: 29rpx;
          font-weight: 400;
          margin-bottom: 21.53rpx;
        }

        .author {
          font-size: 28rpx;
          font-weight: 400;
        }

        .sc {
          margin-top: 21.53rpx;

          text {
            display: inline-block;
            width: 220rpx;
            font-size: 25rpx;
            font-weight: 400;
            color: #8d8d8d;
          }

          image {
            width: 43rpx;
            height: 43rpx;
            vertical-align: sub;
          }
        }
      }
    }
  }
}
</style>
